<!doctype html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<script>
function click() {
  if (!window.eventSender)
    throw 'This test requires eventSender.';
  eventSender.mouseDown();
  eventSender.mouseUp();
}

function mouseMoveTo(selection, target, offsetX) {
  if (!window.eventSender)
    throw 'This test requires eventSender.';
  const left = selection.computeLeft(target) + offsetX;
  const top = selection.computeTop(target) + 10;
  eventSender.mouseMoveTo(left, top);
}

selection_test(
  [
    '012 <span id="start">a</span>bc<br>',
    'def<br>',
    'ghi<br>',
    '<span id="end">j</span>kl<br>',
  ],
  selection => {
    const start = selection.document.getElementById('start');
    const end = selection.document.getElementById('end');
    mouseMoveTo(selection, start, 2);
    click();
    eventSender.mouseDown();

    mouseMoveTo(selection, end, end.offsetWidth + 2);
    eventSender.mouseUp();
  },
  [
    '012 <span id="start">^a</span>bc<br>',
    'def<br>',
    'ghi<br>',
    '<span id="end">j</span>kl|<br>',
  ],
  '1. Double-click with dragging, extend by word granularity');

selection_test(
  [
    '012 <span id="start">a</span>bc<br>',
    'def<br>',
    'ghi<br>',
    '<span id="end">j</span>kl<br>',
  ],
  selection => {
    const start = selection.document.getElementById('start');
    const end = selection.document.getElementById('end');
    mouseMoveTo(selection, start, 2);
    click();
    click();
    eventSender.mouseDown();

    mouseMoveTo(selection, end, end.offsetWidth + 2);
    eventSender.mouseUp();
  },
  [
    '^012 <span id="start">a</span>bc<br>',
    'def<br>',
    'ghi<br>',
    '<span id="end">j</span>kl|<br>',
  ],
  '2. Tripple-click with dragging, extend by paragraph granularity');
</script>
